﻿<DemoExample Title="Basic" RazorCode="@example1RazorCode" CsharpCode="@example1CsharpCode" Id="example1">
    <div class="container">
        <BitNavBar Items="basicNavBarItems" />
    </div>
</DemoExample>

<DemoExample Title="Disabled" RazorCode="@example2RazorCode" CsharpCode="@example2CsharpCode" Id="example2">
    <div>Disabled:</div><br />
    <div class="container">
        <BitNavBar Items="basicNavBarItems" IsEnabled="false" />
    </div>
    <br /><br /><br /><br />
    <div>Disabled item:</div><br />
    <div class="container">
        <BitNavBar Items="basicNavBarItemsDisabled" />
    </div>
</DemoExample>

<DemoExample Title="Manual Mode" RazorCode="@example3RazorCode" CsharpCode="@example3CsharpCode" Id="example3">
    <div>Defines the mode in which the selected item is handled manually, instead of automatically using the current url.</div>
    <br /><br />
    <div class="container">
        <BitNavBar Mode="BitNavMode.Manual"
                   Items="basicNavBarItems"
                   DefaultSelectedItem="basicNavBarItems[0]" />
    </div>
</DemoExample>

<DemoExample Title="IconOnly" RazorCode="@example4RazorCode" CsharpCode="@example4CsharpCode" Id="example4">
    <div>Only renders the icon of each navbar item.</div>
    <br /><br />
    <div class="container">
        <BitNavBar Items="basicNavBarItems" IconOnly />
    </div>
</DemoExample>

<DemoExample Title="FitWidth" RazorCode="@example5RazorCode" CsharpCode="@example5CsharpCode" Id="example5">
    <div>Enables fit-content width for the nav bar that sets the width of the component based on its content size.</div>
    <br /><br />
    <div class="container">
        <BitNavBar Items="basicNavBarItems" FitWidth />
    </div>
</DemoExample>

<DemoExample Title="Templates" RazorCode="@example6RazorCode" CsharpCode="@example6CsharpCode" Id="example6">
    <div>Explore BitNavBar's customization capabilities.</div>
    <br /><br />
    <div>ItemTemplate:</div><br />
    <div class="container">
        <BitNavBar Items="basicNavBarItems">
            <ItemTemplate Context="item">
                <BitText Typography="BitTypography.Caption1" Color="BitColor.Warning">@item.Text</BitText>
                <BitIcon IconName="@item.IconName" Color="BitColor.Success" />
            </ItemTemplate>
        </BitNavBar>
    </div>
    <br /><br /><br /><br />
    <div>Item's template:</div><br />
    <div class="container">
        <BitNavBar Items="templateNavBarItems" />
    </div>
</DemoExample>

<DemoExample Title="Events" RazorCode="@example7RazorCode" CsharpCode="@example7CsharpCode" Id="example7">
    <div>Managing NavBar item click event (OnItemClick).</div>
    <br /><br />
    <div class="container">
        <BitNavBar Items="basicNavBarItems" OnItemClick="(BitNavBarItem item) => eventsClickedItem = item" />
    </div>
    <br /><br />
    Clicked item: @eventsClickedItem?.Text
</DemoExample>

<DemoExample Title="Binding" RazorCode="@example8RazorCode" CsharpCode="@example8CsharpCode" Id="example8">
    <div>This example demonstrates different ways to handle item selection and changes within the component.</div>
    <br /><br />
    <div>DefaultSelectedItem:</div><br />
    <div class="container">
        <BitNavBar @bind-SelectedItem="selectedItem"
                   Items="basicNavBarItems"
                   Mode="BitNavMode.Manual"
                   DefaultSelectedItem="basicNavBarItems[1]" />
    </div>
    <br />
    Selected item: @selectedItem.Text
    <br /><br /><br /><br />
    <div>Two-way SelectedItem:</div><br />
    <div class="container">
        <BitNavBar @bind-SelectedItem="twoWaySelectedItem"
                   Items="basicNavBarItems"
                   Mode="BitNavMode.Manual" />
    </div>
    <br />
    <BitChoiceGroup Horizontal Items="@choiceGroupItems" @bind-Value="@twoWaySelectedItem" />
</DemoExample>

<DemoExample Title="Reselectable" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9">
    <div>Enables the ability to trigger select event even when the same item is selected again.</div>
    <br /><br />
    <BitToggle @bind-Value="reselectable" OnText="Enabled recalling" OffText="Disabled recalling" />
    <br />
    <div class="container">
        <BitNavBar Items="basicNavBarItems"
                   Mode="BitNavMode.Manual"
                   Reselectable="reselectable"
                   OnItemClick="(BitNavBarItem item) => countClick++" />
    </div>
    <br />
    Item click count: @countClick
</DemoExample>

<DemoExample Title="Advanced" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode" Id="example10">
    <div>An illustrative example of integrating this component into a straightforward mobile application.</div>
    <br /><br />
    <div class="mobile-frame">
        <div class="screen">
            <BitSticky Top="0">
                <BitCard FullWidth>
                    <BitStack Horizontal HorizontalAlign="BitAlignment.Center" VerticalAlign="BitAlignment.Center">
                        <BitImage Src="/_content/Bit.BlazorUI.Demo.Client.Core/images/bit-logo.svg" Width="50" />
                        <BitText Typography="BitTypography.H4" Color="BitColor.Info">
                            bit BlazorUI
                        </BitText>
                    </BitStack>
                </BitCard>
            </BitSticky>
            <BitStack Alignment="BitAlignment.Center" AutoHeight Grows>
                <BitText Typography="BitTypography.H4" Color="BitColor.PrimaryForeground">
                    <BitIcon IconName="@advancedSelectedItem.IconName" Color="BitColor.PrimaryForeground" Size="BitSize.Large" />
                    <span>@advancedSelectedItem.Text</span>
                </BitText>
            </BitStack>
            <BitSticky Bottom="0">
                <BitCard FullWidth Style="padding:2px">
                    <BitNavBar Items="basicNavBarItems"
                               Mode="BitNavMode.Manual"
                               @bind-SelectedItem="advancedSelectedItem" />
                </BitCard>
            </BitSticky>
        </div>
    </div>
</DemoExample>

<DemoExample Title="Color" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode" Id="example11">
    <div>Offering a range of specialized colors, providing visual cues for specific states within your application.</div>
    <br /><br />
    <div>Primary:</div><br />
    <div class="container">
        <BitNavBar Color="BitColor.Primary" Items="basicNavBarItems" DefaultSelectedItem="basicNavBarItems[0]" Mode="BitNavMode.Manual" />
    </div>
    <br /><br /><br /><br />
    <div>Secondary:</div><br />
    <div class="container">
        <BitNavBar Color="BitColor.Secondary" Items="basicNavBarItems" DefaultSelectedItem="basicNavBarItems[0]" Mode="BitNavMode.Manual" />
    </div>
    <br /><br /><br /><br />
    <div>Tertiary:</div><br />
    <div class="container">
        <BitNavBar Color="BitColor.Tertiary" Items="basicNavBarItems" DefaultSelectedItem="basicNavBarItems[0]" Mode="BitNavMode.Manual" />
    </div>
    <br /><br /><br /><br />
    <div>Info:</div><br />
    <div class="container">
        <BitNavBar Color="BitColor.Info" Items="basicNavBarItems" DefaultSelectedItem="basicNavBarItems[0]" Mode="BitNavMode.Manual" />
    </div>
    <br /><br /><br /><br />
    <div>Success:</div><br />
    <div class="container">
        <BitNavBar Color="BitColor.Success" Items="basicNavBarItems" DefaultSelectedItem="basicNavBarItems[0]" Mode="BitNavMode.Manual" />
    </div>
    <br /><br /><br /><br />
    <div>Warning:</div><br />
    <div class="container">
        <BitNavBar Color="BitColor.Warning" Items="basicNavBarItems" DefaultSelectedItem="basicNavBarItems[0]" Mode="BitNavMode.Manual" />
    </div>
    <br /><br /><br /><br />
    <div>SevereWarning:</div><br />
    <div class="container">
        <BitNavBar Color="BitColor.SevereWarning" Items="basicNavBarItems" DefaultSelectedItem="basicNavBarItems[0]" Mode="BitNavMode.Manual" />
    </div>
    <br /><br /><br /><br />
    <div>Error:</div><br />
    <div class="container">
        <BitNavBar Color="BitColor.Error" Items="basicNavBarItems" DefaultSelectedItem="basicNavBarItems[0]" Mode="BitNavMode.Manual" />
    </div>
    <br /><br /><br /><br />
    <div style="background:var(--bit-clr-fg-sec);padding:1rem">
        <div style="color:var(--bit-clr-bg-pri)">PrimaryBackground:</div><br />
        <div class="container">
            <BitNavBar Color="BitColor.PrimaryBackground" Items="basicNavBarItems" DefaultSelectedItem="basicNavBarItems[0]" Mode="BitNavMode.Manual" />
        </div>
        <br /><br /><br /><br />
        <div style="color:var(--bit-clr-bg-sec)">SecondaryBackground:</div><br />
        <div class="container">
            <BitNavBar Color="BitColor.SecondaryBackground" Items="basicNavBarItems" DefaultSelectedItem="basicNavBarItems[0]" Mode="BitNavMode.Manual" />
        </div>
        <br /><br /><br /><br />
        <div style="color:var(--bit-clr-bg-ter)">TertiaryBackground:</div><br />
        <div class="container">
            <BitNavBar Color="BitColor.TertiaryBackground" Items="basicNavBarItems" DefaultSelectedItem="basicNavBarItems[0]" Mode="BitNavMode.Manual" />
        </div>
    </div>
    <br /><br /><br /><br />
    <div>PrimaryForeground:</div><br />
    <div class="container">
        <BitNavBar Color="BitColor.PrimaryForeground" Items="basicNavBarItems" DefaultSelectedItem="basicNavBarItems[0]" Mode="BitNavMode.Manual" />
    </div>
    <br /><br /><br /><br />
    <div>SecondaryForeground:</div><br />
    <div class="container">
        <BitNavBar Color="BitColor.SecondaryForeground" Items="basicNavBarItems" DefaultSelectedItem="basicNavBarItems[0]" Mode="BitNavMode.Manual" />
    </div>
    <br /><br /><br /><br />
    <div>TertiaryForeground:</div><br />
    <div class="container">
        <BitNavBar Color="BitColor.TertiaryForeground" Items="basicNavBarItems" DefaultSelectedItem="basicNavBarItems[0]" Mode="BitNavMode.Manual" />
    </div>
    <br /><br /><br /><br />
    <div>PrimaryBorder:</div><br />
    <div class="container">
        <BitNavBar Color="BitColor.PrimaryBorder" Items="basicNavBarItems" DefaultSelectedItem="basicNavBarItems[0]" Mode="BitNavMode.Manual" />
    </div>
    <br /><br /><br /><br />
    <div>SecondaryBorder:</div><br />
    <div class="container">
        <BitNavBar Color="BitColor.SecondaryBorder" Items="basicNavBarItems" DefaultSelectedItem="basicNavBarItems[0]" Mode="BitNavMode.Manual" />
    </div>
    <br /><br /><br /><br />
    <div>TertiaryBorder:</div><br />
    <div class="container">
        <BitNavBar Color="BitColor.TertiaryBorder" Items="basicNavBarItems" DefaultSelectedItem="basicNavBarItems[0]" Mode="BitNavMode.Manual" />
    </div>
</DemoExample>

<DemoExample Title="Style & Class" RazorCode="@example12RazorCode" CsharpCode="@example12CsharpCode" Id="example12">
    <div>Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.</div>
    <br /><br />
    <div>Component's Style:</div><br />
    <div class="container">
        <BitNavBar Items="basicNavBarItems"
                   Style="border-radius: 1rem; margin: 1rem; box-shadow: tomato 0 0 1rem;" />
    </div>
    <br /><br />
    <div>Component's Class:</div><br />
    <div class="container">
        <BitNavBar Items="basicNavBarItems"
                   Class="custom-class" />
    </div>
    <br /><br /><br /><br />
    <div>Item's style & class:</div><br />
    <div class="container">
        <BitNavBar Items="styleClassItems" />
    </div>
    <br /><br /><br /><br />
    <div>Styles:</div><br />
    <div class="container">
        <BitNavBar Items="basicNavBarItems" Styles="@(new() { ItemIcon = "color: aqua;", ItemText = "color: tomato;" })" />
    </div>
    <br /><br />
    <div>Classes:</div><br />
    <div class="container">
        <BitNavBar Items="basicNavBarItems" Classes="@(new() { ItemIcon = "custom-item-ico", ItemText = "custom-item-txt" })" />
    </div>
</DemoExample>

<DemoExample Title="RTL" RazorCode="@example13RazorCode" CsharpCode="@example13CsharpCode" Id="example13">
    <div>Use BitNavBar in right-to-left (RTL).</div>
    <br /><br />
    <div dir="rtl" class="container">
        <BitNavBar Dir="BitDir.Rtl" Items="rtlItems" />
    </div>
</DemoExample>

@code {
    private static readonly List<BitNavBarItem> templateNavBarItems =
                            [
        new() { Text = "Home", IconName = BitIconName.Home  },
        new() { Text = "Products", Template = (item) => @<div style="display:flex;flex-direction:column"><b>@item.Text</b><span>🎁</span></div> },
        new() { Text = "Academy", IconName = BitIconName.LearningTools },
        new() { Text = "Profile", IconName = BitIconName.Contact },
    ];
}